<div class="content-heading">Tables
    <small>An Advanced Datagrid for AngularJS</small>
</div>
<div class="container-fluid">
    <!-- Basic Example-->
    <h4 class="page-header mt0">Basic Example</h4>
    <ag-grid-angular #agGrid class="ag-angle" style="width: 100%; height: 400px" [gridOptions]="gridOptions" (gridReady)="gridReady($event)">
    </ag-grid-angular>
    <!-- Filter Example-->
    <h4 class="page-header">Filter Example</h4>
    <div class="row">
        <div class="col-lg-4 col-md-6">
            <input class="mb form-control" placeholder="Filter..." type="text" (keyup)="onQuickFilterChanged($event)" />
        </div>
    </div>
    <ag-grid-angular #agGrid class="ag-angle" style="width: 100%; height: 400px" [gridOptions]="gridOptions1" (gridReady)="gridReady1($event)" enableFilter></ag-grid-angular>
    <!-- Pinning Example-->
    <h4 class="page-header">Pinning Example</h4>
    <ag-grid-angular #agGrid class="ag-angle" style="width: 100%; height: 400px" [gridOptions]="gridOptions2" (gridReady)="gridReady2($event)"></ag-grid-angular>
</div>
